<template>
  <div class="toolbar">
    <el-button-group>
      <el-button
          size="small"
          icon="el-icon-zoom-in"
          @click="$emit('zoomIn')"
          title="放大"
      ></el-button>
      <el-button
          size="small"
          icon="el-icon-zoom-out"
          @click="$emit('zoomOut')"
          title="缩小"
      ></el-button>
      <el-button
          size="small"
          icon="el-icon-refresh"
          @click="$emit('reload')"
          title="刷新"
      ></el-button>
      <el-button
          size="small"
          icon="el-icon-full-screen"
          @click="$emit('fullscreen')"
          title="全屏"
      ></el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'ToolBar'
}
</script>

<style scoped lang="scss">
.toolbar {
  display: inline-block;

  ::v-deep .el-button {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
</style>